<template>
	<view class="content">
		<view class="customerList">
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">设备代码：</label>
				<input type="text" v-model="device.deviceCode" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">房间名：</label>
				<input type="text" v-model="device.machineName" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for="" style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">描述：</label>
				<input type="text" v-model="device.deviceDesc" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">推荐套餐：</label>
				<input type="text" v-model="device.customerMeal" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">设备类型:</label>
				<view class="radio-group" style="width: 400rpx;" v-for="(item, index) in deviceTypes" :key="item.value">
					<radio-group @change="devicetypeChange">
						<radio color="#62b074;" :value="item.value" :checked="index === deviceType"
							style="transform:scale(0.7)" />
						<text style="color: #62b074;font-size: 25rpx;font-weight: 600;">{{item.name}}</text>
					</radio-group>
				</view>
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">是否是大门:</label>
				<view class="radio-group" style="width: 400rpx;" v-for="(item, index) in isMealDevices"
					:key="item.value">
					<radio-group @change="mealDeviceChange">
						<radio color="#62b074;" :value="item.value" :checked="index === isMealDevice"
							style="transform:scale(0.7)" />
						<text style="color: #62b074;font-size: 25rpx;font-weight: 600;">{{item.name}}</text>
					</radio-group>
				</view>
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">是否是网关设备:</label>
				<view class="radio-group" style="width: 400rpx;" v-for="(item, index) in isGateways" :key="item.value">
					<radio-group @change="gatewayChange">
						<radio color="#62b074;" :value="item.value" :checked="index === isGateway"
							style="transform:scale(0.7)" />
						<text style="color: #62b074;font-size: 25rpx;font-weight: 600;">{{item.name}}</text>
					</radio-group>
				</view>
			</view>
			<view class="messageList">
				<label for=""
					style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">续费单价：</label>
				<input type="text" v-model="device.price" value="" placeholder="请输入详细信息" />
			</view>
			<view class="messageList">
				<label for="" style="font-size: 26rpx;letter-spacing: 5rpx;color: #62b074;font-weight: 600;">图片：</label>
				<view style="display: flex;text-align: center;justify-content: center;align-items: center;">
					<image :src="img1" class="img" @click="upload(1)"></image>
					<image :src="img2" class="img" @click="upload(2)"></image>
					<image :src="img3" class="img" @click="upload(3)"></image>
				</view>
			</view>
		</view>
		<view style="height: 310rpx;"></view>
		<view class="afrim" @click="save()">保存设备</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				img1: '/static/upload.png',
				img2: '/static/upload.png',
				img3: '/static/upload.png',
				device: {},
				value: 0,
				yesChecked: false,
				noChecked: false,
				isGateways: [{
						value: '0',
						name: '是',
						checked: 'true'
					},
					{
						value: '1',
						name: '否'
					}
				],
				isGateway: 0,
				isMealDevices: [{
						value: '0',
						name: '不是'
					},
					{
						value: '1',
						name: '是',
						checked: 'true'
					}
				],
				isMealDevice: 0,
				deviceTypes: [{
						value: '0',
						name: '4G设备',
						checked: 'true'
					},
					{
						value: '1',
						name: '4G+wifi设备'
					},
					{
						value: '2',
						name: '奔智wifi锁'
					},
					{
						value: '3',
						name: '谷家wifi锁'
					}
				],
				deviceType: 0,
				storeId: null,
				imgURL: '',
				imageValue: [],
			};
		},
		onLoad(options) {
			let storeId = options.storeId;
			let deviceId = options.deviceId;
			if (typeof storeId != 'undefined') {
				this.device.storeId = storeId;
			}
			if (typeof deviceId != 'undefined') {
				this.getDeviceById(deviceId);
			}
		},
		methods: {
			handleChange(e) {
				this.value = e.detail.value;
				this.meal.isXufei = this.value;
				console.log(this.value)
			},
			handleUploadFile(type,imageUrl) {
				uni.uploadFile({
					url: Api.BASEURI + 'dms/device/upload',
					filePath: imageUrl,
					name: 'file',
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).data)
						if(type==1){
							this.img1 = JSON.parse(uploadFileRes.data).data;
						}
						if(type==2){
							this.img2 = JSON.parse(uploadFileRes.data).data;
						}
						if(type==3){
							this.img3 = JSON.parse(uploadFileRes.data).data;
						}
						// that.device.imageUrl = JSON.parse(uploadFileRes.data).data
					}
				});
			},
			upload(type) {
				console.log(11111)
				uni.chooseImage({
					count: 1,
					success: res => {
						this.handleUploadFile(type,res.tempFilePaths[0]);
					}
				});
			},
			async getDeviceById(deviceId) {
				let data = await Api.apiCall('get', Api.qsg.getDeviceById, {
					id: deviceId
				});
				if (data) {
					console.log(data)
					this.device = data.device;
					this.deviceType = this.device.deviceType;
					this.isGateway = this.device.isGateway;
					this.isMealDevice = this.device.isMealdevice;
					this.img1 = this.device.imageUrl;
					this.img2 = this.device.imageUrl1;
					this.img3 = this.device.imageUrl2;
				}
			},
			gatewayChange: function(evt) {
				for (let i = 0; i < this.isGateways.length; i++) {
					if (this.isGateways[i].value === evt.detail.value) {
						this.isGateway = i
						break;
					}
				}
			},
			mealDeviceChange: function(evt) {
				for (let i = 0; i < this.isMealDevices.length; i++) {
					if (this.isMealDevices[i].value === evt.detail.value) {
						this.isMealDevice = i
						break;
					}
				}
			},
			devicetypeChange: function(evt) {
				for (let i = 0; i < this.deviceTypes.length; i++) {
					if (this.deviceTypes[i].value === evt.detail.value) {
						this.deviceType = i
						break;
					}
				}
			},
			async save() {
				let params = {
					id: this.device.id,
					deviceType: this.deviceType,
					isGateway: this.isGateway,
					isMealdevice: this.isMealDevice,
					deviceCode: this.device.deviceCode,
					machineName: this.device.machineName,
					deviceDesc: this.device.deviceDesc,
					customerMeal: this.device.customerMeal,
					price: this.device.price,
					storeId: this.device.storeId,
					imageUrl:this.img1,
					imageUrl1:this.img2,
					imageUrl2:this.img3
				}
				let data = await Api.apiCall('post', Api.qsg.createDevice, params);
				console.log(data)
				if (data) {
					uni.showModal({
						title: '提示',
						content: '保存成功.',
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack()
							} else if (res.cancel) {

							}
						}
					});
				}
			}
		}
	}
</script>

<style>
	.afrim {
		width: 650rpx;
		height: 80rpx;
		background: #0DA944;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		bottom: calc(100% - 95%);
		margin-left: 40rpx;
	}

	.customerType {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		vertical-align: top;
		text-align: right;
		padding-right: 30rpx;
		font-size: 30rpx;
	}

	.pickerType {
		width: 540rpx;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}

	.pickerType view {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.upBox {
		padding: 0 30rpx;
	}

	.upBox text {
		display: inline-block;
		padding: 20rpx 0;
	}

	.messageList {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F8F8F8;
	}
	
	.messageList label {
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		vertical-align: top;
		text-align: right;
		padding-right: 30rpx;
		font-size: 30rpx;
	}

	.messageList input {
		height: 80rpx;
		vertical-align: top;
		display: inline-block;
		line-height: 80rpx;
		font-size: 28rpx;
	}

	.fan {
		position: relative;
		padding: 30rpx 0;
	}

	.fan button {
		position: absolute;
		top: 30rpx;
		left: 0;
		width: 750rpx;
		height: 480rpx;
		background: none;
		border: none;
	}

	.fanMian {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.fanMian image {
		width: 690rpx;
		height: 480rpx;
	}

	.examTit {
		width: 750rpx;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.examTit text {
		font-size: 24rpx;
		color: #ff1d31;
	}

	.examTit {
		width: 750rpx;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.examTit text {
		font-size: 24rpx;
		color: #ff1d31;
	}

	.fan {
		position: relative;
		padding: 30rpx 0;
	}

	.fan button {
		position: absolute;
		top: 30rpx;
		left: 0;
		width: 750rpx;
		height: 480rpx;
		background: none;
		border: none;
	}

	.fanMian {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.img {
		width: 200rpx;
		height: 200rpx;
		box-shadow: 0 0 6px #62b074;
		margin: 10rpx;
	}

	.fanMian image {
		width: 690rpx;
		height: 480rpx;
	}
</style>
